<template>
  <div class="receipt-box">
    <!-- <nav-bar :title="`${title}详情`"></nav-bar> -->
    <nav-bar :title="`单据详情`"></nav-bar>
    <div class="tab" v-if="showTab === '1'">
      <div class="item" :class="billType === '1' ? 'active' : ''" @click="onTabClick('1')">装货</div>
      <div class="item" :class="billType === '2' ? 'active' : ''" @click="onTabClick('2')">卸货</div>
      <div class="line" :class="billType === '2' ? 'line_2' : ''"></div>
    </div>
    <div class="receipt">
      <div class="info__reject" v-if="rejectReason">
        <div class="title">驳回理由</div>
        <div class="description">{{ rejectReason }}</div>
      </div>

      <div class="info__box">
        <van-cell>
          <template #title>
            <div>{{ billType === '1' ? '装货' : '卸货' }}量(吨）</div>
          </template>
          <template #value>
            <van-field
              v-model="quality"
              :disabled="isDisabled"
              type="number"
              placeholder="请输入实际装货量与单据一致"
            />
          </template>
        </van-cell>
        <div class="line"></div>
        <van-cell>
          <template #title>
            <div>
              {{ billType === '1' ? '装货时间' : '卸货时间' }}
            </div>
          </template>
          <template #value>
            <van-field
              v-model="operateTime"
              :disabled="isDisabled"
              type="text"
              placeholder="请输入实际装货量与单据一致"
            />
          </template>
        </van-cell>
      </div>
      <div class="title-name">
        <div class="blue__line"></div>
        <div class="title">{{ billType === '1' ? '装货' : '卸货' }}</div>
      </div>
      <van-row class="receipt-item" justify="center" v-show="addGoodsFile.length > 0">
        <van-col class="upload__item">
          <van-uploader v-model="addGoodsFile" multiple :max-count="3" :disabled="isDisabled"></van-uploader>
        </van-col>
      </van-row>
    </div>
    <div class="submit__btn__box" v-if="showOpeartion === '1' && !rejectReason">
      <van-button class="cancel" type="default" @click="onReject">驳回单据</van-button>
      <van-button class="commit" type="primary" @click="onShowPwd">
        {{ Number(updateData.type) === BillOpeartionEm.BILL.value ? '确认单据' : '确认签收' }}
      </van-button>
    </div>
  </div>
  <div
    v-loading="{ isLoading: loadingList.isLoading, title: loadingList.title, isBottomMask: loadingList.isBottomMask }"
  ></div>
  <van-popup v-model:show="passwordPoppup" position="bottom" class="selfPopup">
    <div class="passwordPoppup">
      <div class="memo">请输入支付密码</div>
      <van-password-input :value="updateData.password" :focused="true" />
      <van-number-keyboard
        v-model="updateData.password"
        :show="true"
        @input="onCommit"
        maxlength="6"
        @blur="passwordPoppup = false"
      />
    </div>
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import { Toast } from 'vant'
import store from '@/store/index'
import { TransportBillType, BillRejectType } from './utils/types'
import { BillOpeartionEm } from './utils/enums'

interface LoadingList {
  isLoading: boolean
  title: string
  isBottomMask: boolean
}

interface State {
  addGoodsFile: { url: string }[]
  isDisabled: boolean
  loadingList: LoadingList
}

export default defineComponent({
  name: 'Receipt',
  components: {
    NavBar
  },

  setup() {
    // 上传的参数
    const updateData = reactive<TransportBillType>({
      billId: '', //	运单id		true
      password: '', //	支付密码
      type: 1
    })

    const detail = ref<any>({})

    const title = ref<string>('装货')

    const loadingList = {
      isLoading: false,
      title: '加载中...',
      isBottomMask: false
    }

    const state = reactive<State>({
      addGoodsFile: [],
      isDisabled: true,
      loadingList: { ...loadingList }
    })

    const rejectReason = ref<string>('') // 拒绝理由

    const router = useRouter(),
      route = useRoute()
    // 获取路由参数
    const { showTab, billId, type, billStatusType, showOpeartion, payStatus } = route.query as {
      billId: string // 运单ID
      type: '1' | '2' // 装货 卸货 类型
      billStatusType: 1 | 2 | 3 | 4 //	类型（字典 1确认单据 2确认签收 3确认回单 4支付月结）
      showTab: string // 是否显示回单的tab栏目 0 不显示 1 显示
      showOpeartion: string // 是否显示操作按钮 0 不显示 1 显示
      payStatus: string // 确认签收状态 用来判断是否需要输入支付密码
      [propname: string]: any
    }

    const operateTime = ref<string>('') // 操作时间
    const quality = ref<number>(0) // 货物重量
    const billType = ref<'1' | '2'>('1') // 装货 1 卸货2
    const passwordPoppup = ref<boolean>(false) // 是否显示支付密码
    updateData.billId = billId
    updateData.type = billStatusType
    billType.value = type

    switch (Number(billStatusType)) {
      case 1:
        title.value = '装货'
        break
      case 2:
        title.value = '卸货'
        break
      case 3:
        title.value = '回单'
        break
      case 4:
        title.value = '月结'
        break
    }

    // 确认
    const onCommit = async (value: any): Promise<void> => {
      if (String(updateData.password).length < 5) return
      updateData.password += value
      const result = await store.dispatch('waybill/handleTransportBillConfirmCons', updateData)
      if (result) {
        Toast.success('操作成功')
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }
    }

    // 显示支付密码弹窗
    const onShowPwd = async (): Promise<void> => {
      if (
        (Number(billStatusType) === 1 && detail.value.prepaymentAmount) ||
        (Number(billStatusType) === 2 && detail.value.payAmount) ||
        (Number(billStatusType) === 3 && detail.value.receiptAmount) ||
        (Number(billStatusType) === 4 && detail.value.settleAmount)
      ) {
        updateData.password = ''
        const result = await store.dispatch('user/handleFinanceWalletPayPasswordStatus')
        // 判断是否有设置支付密码
        console.log(result, 'result')
        if (result && result.status === true) {
          passwordPoppup.value = true
        } else {
          Toast.fail('您未设置支付密码，请到平台上设置支付密码')
        }
      } else {
        const params = {
          billId: updateData.billId,
          type: updateData.type
        }
        const result = await store.dispatch('waybill/handleTransportBillConfirmCons', params)
        if (result) {
          Toast.success('操作成功')
          setTimeout(() => {
            router.go(-1)
          }, 2000)
        }
      }
    }

    // 单据驳回
    const onReject = async (): Promise<void> => {
      router.push({
        name: 'RejectReason',
        query: {
          billId,
          type: Number(billType.value)
        }
      })
    }

    // 获取单据信息
    const getBillDetail = async (type?: string): Promise<void> => {
      state.addGoodsFile = []
      quality.value = 0
      operateTime.value = ''
      const data = {
        billId,
        type: type ? type : billType.value
      }
      const result = await store.dispatch('waybill/handleTransportBillGetReceipt', data)
      result?.receipt?.firstImageUrl && state.addGoodsFile.push({ url: result?.receipt?.firstImageUrl })
      result?.receipt?.secondImageUrl && state.addGoodsFile.push({ url: result?.receipt?.secondImageUrl })
      result?.receipt?.thirdImageUrl && state.addGoodsFile.push({ url: result?.receipt?.thirdImageUrl })
      result?.quality && (quality.value = result?.quality)
      result?.receipt?.createTime && result?.receipt?.createTime && (operateTime.value = result?.receipt?.createTime)
      rejectReason.value = result?.receipt?.reason ?? ''
      detail.value = result
    }

    // 切换tab
    const onTabClick = (current: '1' | '2'): void => {
      billType.value = current
      getBillDetail(current)
    }

    getBillDetail()

    return {
      ...toRefs(state),
      onCommit,
      billType,
      operateTime,
      showTab,
      onTabClick,
      quality,
      onReject,
      updateData,
      showOpeartion,
      passwordPoppup,
      onShowPwd,
      BillOpeartionEm,
      rejectReason,
      title
    }
  }
})
</script>

<style lang="scss">
@import '@/style/variables.scss';

.receipt-box {
  background-color: $background-color-base;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  .van-field--disabled {
    .van-field__control {
      color: #101736 !important;
      -webkit-text-fill-color: #101736 !important;
    }
  }
  .van-uploader__wrapper--disabled {
    .van-uploader__preview,
    .van-image,
    img {
      width: 350px;
      display: block;
    }
    .van-uploader__preview-delete,
    .van-uploader__input-wrapper {
      display: none;
    }
  }
  .info__reject {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 15px;
    .title {
      font-size: 14px;
      font-weight: 500;
      color: #101736;
      margin-bottom: 10px;
    }
    .description {
      width: 100%;
      height: 54px;
      background: #fafbfd;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101736;
    }
  }
  .receipt {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    position: relative;
    padding: 10px 12px;
    .receipt-item {
      margin-bottom: 15px;
    }

    .title-name {
      font-size: 15px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: $color-text-regular;
      .blue__line {
        width: 3px;
        height: 10px;
        background: #409eff;
        border-radius: 1px;
        margin-right: 6px;
      }
    }

    // 上传图片
    ::v-deep(.van-uploader) {
      width: 100%;
      .van-uploader__wrapper {
        width: 100%;
        .van-uploader__input-wrapper {
          width: 100%;
          height: 120px;
          border-radius: 10px;
          position: relative;
        }
      }
    }

    ::v-deep(.van-uploader__preview) {
      width: 100%;
      height: 120px;
      margin: 0;
      margin-bottom: 15px;
      .van-uploader__preview-image {
        width: 100%;
        height: 100%;
      }
    }

    .iconfont {
      font-size: 50px;
      color: #63bdff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
    }
    .describe {
      color: $color-text-placeholder;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        padding-top: 56px;
        font-weight: 400;
        color: #666666;
        font-size: 12px;
      }
    }
  }

  //上传
  .submit-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    border-radius: 22px;
    font-size: 16px;
    background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
  }
  .submit__btn__box {
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    align-items: center;
    justify-content: center;
    button {
      font-size: 16px;
      border-radius: 22px;
      width: 140px;
    }
    .commit {
      background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
      margin-left: 10px;
    }
  }
  .default__upload {
    width: 100%;
  }

  .tip {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 232, 228, 0.4);
    font-size: 12px;
    font-weight: 400;
    color: #ff6459;
  }
  .info__box {
    margin-bottom: 20px;
    box-sizing: border-box;
    .line {
      width: 326px;
      height: 1px;
      margin: 0 auto;
      background-color: #ededed;
    }
  }
  .van-cell {
    height: 50px;
    line-height: 30px;
    .van-field {
      height: 100%;
      padding: 0;
    }
  }
  .van-cell__title {
    max-width: 120px;
  }
  .van-cell::after {
    border: unset;
  }
  .van-uploader__input-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: white;
    border-radius: 8px;
  }
  .van-uploader__wrapper {
    width: 100%;
  }
  .van-uploader__upload {
    display: none;
  }
  .van-uploader__preview-delete {
    display: none;
  }
  .van-uploader__preview {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    .van-image {
      width: 100%;
      height: 176px;
      box-sizing: border-box;
      padding: 12px;
      background: #f6faff;
      border-radius: 6px;
    }
    img {
      width: 305px;
    }
  }
  .tab {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    background: white;
    position: relative;
    .item {
      width: 50%;
      text-align: center;
      font-size: 14px;
      line-height: 50px;
      color: #575c72;
    }
    .active {
      font-weight: 500;
      color: #409eff;
    }
    .line {
      width: 26px;
      height: 1px;
      background-color: #409eff;
      position: absolute;
      bottom: 0;
      left: 80px;
    }
    .line_2 {
      // left: 268px;
      transform: translateX(188px);
    }
  }
}
.passwordPoppup {
  width: 100%;
  padding-top: 30px;
  height: 355px;
  .memo {
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
  }
}
</style>
